import React from 'react';
import { Form, Input, Button, notification, Icon } from 'antd';
import createHistory from 'history/createHashHistory';
import axios from 'axios'
import './index.less'
import {PATH} from '../../utils/urls'
const FormItem = Form.Item;
const history = createHistory();

class LoginPage extends React.Component {
    state={
        captchImageSource:null
    };
    /**
     * 提交按钮点击
     * @param e
     */
    handleSubmit = (e) => {
        e.preventDefault();
        let n = this.props.form.getFieldsValue().username;
        let p = this.props.form.getFieldsValue().password;
        this.loginFun(n,p)
    }

    /**
     * 返回一个弹框对象，提示用户名和密码
     * @param type
     * @param msg
     * @returns {*}
     */
    openNotificationWithIcon = (type,msg) => {
        return notification[type]({
             message: '登录',
             description: msg,
             duration: 6,
             icon: <Icon type="smile-circle" style={{ color: '#108ee9' }} />,
           })
    }

    componentDidMount() {
        /**
         * 获取图片验证码并显示在页面
         */
        this.getCaptchaImage();
    }

    /**
     * 登录接口调用
     * @param n
     * @param p
     */
    loginFun(n,p){
        console.log(document.getElementById("captchValue").value);
        axios({
            method:'post',
            url:PATH.login,
            params:{
                username:n,
                password:p,
                validateCode:document.getElementById("captchValue").value,
                rememberMe:false,
                uid:"1111"
            }
        }).then(response => {
            if(response.data.code==0){
                localStorage.setItem("username",n);
                localStorage.token = response.data.data;
                history.push('/index');
            }else{
                this.openNotificationWithIcon('info',response.data.msg);
            }
            console.log(response);
        });
    }
    /**
     * 点击验证码更新
     * @returns {*}
     */
    getCaptchaImage=()=>{
        document.getElementById("captchImage").setAttribute("src",PATH.getCaptcha+"?type=math&&uid=1111");
    }


    render() {
        const { getFieldDecorator } = this.props.form
        const captchImage = this.state.captchImageSource;
        return (
            <div className="loginpagewrap">
                <div className="box">
                    <div className="loginWrap">
                        <Form onSubmit={this.handleSubmit}>
                            <FormItem>
                                {getFieldDecorator('username', {
                                    rules: [{ required: true, message: '请输入用户名' }],
                                })(
                                    <Input placeholder="Username" />
                                )}
                            </FormItem>
                            <FormItem>
                                {getFieldDecorator('password', {
                                    rules: [{ required: true, message: '请输入密码' }],
                                })(
                                    <Input type="password" placeholder="Password" />
                                )}
                            </FormItem>
                            <div className="checkCode">
                                <input className="ant-input ant-input-lg" id='captchValue' placeholder="输入验证码"></input>
                                <img onClick={this.getCaptchaImage} id= 'captchImage' src={captchImage}></img>
                            </div>
                            <Button type="primary" htmlType="submit" className="loginBtn">Login</Button>
                        </Form>
                    </div>
                </div>
            </div>
        );
    }
}

let Login = Form.create()(LoginPage);
export default Login;